<!DOCTYPE html>
<html>

	<head>
		<title>记账本</title>
		<meta charset="UTF-8">
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="description" content="Tiny-bookkeeping v1.0.0" />
		<meta name="Author" content="Tiny" />
		<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<meta name="apple-mobile-web-app-title" content="bill">
		<link rel="shortcut icon" type="text/css" href="img/favicon.ico" />
		<link rel="apple-touch-icon-precomposed" href="img/banner3_03.png" />
		<link rel="apple-touch-startup-image" href="start/Startpage@3x.png"  media="screen and (device-width: 414px) and (orientation: portrait)" >
		<link rel="apple-touch-startup-image" href="start/Startpage@3x.png"  media="screen and (device-width: 736px) and (orientation: landscape)" >
		<link rel="apple-touch-startup-image" href="start/640+960.png" media="screen and (device-width: 320px)  and (orientation: portrait)" >
		<link rel="apple-touch-startup-image" href="start/640+960.png" media="screen and  (device-width: 480px) and (orientation: landscape)" >
		<link rel="apple-touch-startup-image" href="start/640_1136.png" media="screen and (device-width: 320px) and (orientation: portrait)" >
		<link rel="apple-touch-startup-image" href="start/640_1136.png" media="screen and (device-width: 568px) and (orientation: landscape)" >
		<link rel="apple-touch-startup-image" href="start/Startpage@2x.png" media="screen and (device-width: 375px) and (orientation: portrait)" >
		<link rel="apple-touch-startup-image" href="start/Startpage@2x.png" media="screen and (device-width: 667px) and (orientation: landscape)" >
		<link rel="apple-touch-startup-image" href="start/Startpage@iPhone X.png" media="screen and (device-width: 375px) and (orientation: portrait)" >
		<link rel="apple-touch-startup-image" href="start/Startpage@iPhone X.png" media="screen and (device-width: 812px) and (orientation: landscape)" >
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/app.css" />
		<link rel="stylesheet" type="text/css" href="css/mui.picker.min.css" />
		<link rel="stylesheet" type="text/css" href="css/phpto.css"/>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript" src="js/mui.picker.min.js"></script>
		<script type="text/javascript" src="js/mui.zoom.js"></script>
		<script type="text/javascript" src="js/mui.previewimage.js"></script>
	</head>
	<style>
		.mui-control-content {
			background-color: white;
			min-height: 450px;
		}
		
		.mui-control-content .mui-loading {
			margin-top: 50px;
		}
		
		.tiny-span {
			display: inline-block;
			line-height: 44px;
			/*width: 90px;*/
		}
		
		#list {
			/*避免导航边框和列表背景边框重叠，看起来像两条边框似得；*/
			margin-top: -1px;
		}
		
		.mui-input-row {
			background-color: #ffffff;
		}
		
		#budget {
			line-height: 40px;
		}
		
		body {
			background-image: url(start/Startpage@3x.png);
			height: 100%;
			background-size: 100%;
		}
		
		.mui-content {
			opacity: 0.9;
		}
		
		.tiny-content-1 {
			width: 100%;
			display: inline-block;
			overflow: hidden;
		}
		
		.tiny-content-2 {
			width: 100%;
			display: inline-block;
			overflow: hidden;
		}
		
		.tiny-content-3 {
			display: inline-block;
			overflow: hidden;
		}
		
		#app {
			font-size: 12px;
		}
		
		.mui-bar {
			padding-right: 0;
		}
		@-webkit-keyframes rotation {
	    from {-webkit-transform: rotate(0deg);
		}to {
		    -webkit-transform: rotate(360deg);
		}}
		
		.Rotation {
		    -webkit-transform: rotate(360deg);
		    animation: rotation 8s linear infinite;
		    -moz-animation: rotation 8s linear infinite;
		    -webkit-animation: rotation 8s linear infinite;
		    -o-animation: rotation 8s linear infinite;
		}
	</style>

	<body ontouchmove="event.preventDefault()">

		<main id="app">
			<header class="mui-bar mui-bar-nav">
				<!--<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>-->
				<button style="line-height: 20px;margin: 5px;" type="button" id="budget-reset" data-loading-icon="mui-spinner mui-spinner-custom " class="mui-pull-left mui-btn-primary " v-on:click="newtiny">新建账单</button>
				<h1 class="mui-title">消费记录</h1>
				<!--<img data-preview-src="" data-preview-group="1" style="line-height: 20px;margin: 5px;" class="mui-pull-right Rotation" height="30px" src="start/weixin.jpg"/>
				<img style="display: none;" src="start/zhifu.jpg"data-preview-src=""class="mui-pull-right" data-preview-group="1"/>-->
			</header>
			<div class="mui-content">
				<div id="slider" class="mui-slider">
					<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
						<a class="mui-control-item" href="#item1mobile">
							消费金额
						</a>
						<a class="mui-control-item" href="#item2mobile">
							消费详情
						</a>
						<a class="mui-control-item" href="#item3mobile">
							账单汇总
						</a>
					</div>
					<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>
					<div class="mui-slider-group">
						<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
							<div id="scroll1" class="mui-scroll-wrapper">
								<div class="mui-scroll">
									<ul class="mui-table-view">
										<li class="mui-table-view-cell">
											<span class="tiny-span">预算总金额:</span>
											<span id="budget">{{budget}}</span>

										</li>
										<li class="mui-table-view-cell">
											<span class="tiny-span">预算剩余:</span>
											<span id="budget-remaining">{{budgetNum}}元</span>
										</li>
										<li class="mui-table-view-cell">
											<span class="tiny-span">消费总额:</span>
											<span id="total">{{total}}元</span>
										</li>
										<li class="mui-table-view-cell">
											<span class="tiny-span">消费金额:</span>
											<input style="max-width: 240px;margin-bottom: 0;" type="number" id="consumption" class="mui-input-clear" placeholder="输入消费金额（单位：元）" onkeyup="this.value=this.value.replace(/\-/g,'')">
										</li>
										<li class="mui-table-view-cell">
											<span class="tiny-span">消费内容:</span>
											<input style="max-width: 240px; margin-bottom: 0;" type="text" id="detail" class="mui-input-clear" placeholder="请输入此次消费的内容">
										</li>
										<button id='demo1' data-options='{}' class="btn mui-btn mui-btn-block">选择日期时间</button>
										<button type="button" data-loading-icon="mui-spinner mui-spinner-custom" class="mui-btn mui-btn-primary mui-btn-block sure" id="sure" v-on:click="addBudget">确认</button>
									</ul>
								</div>
							</div>
						</div>
						<div id="item2mobile" class="mui-slider-item mui-control-content">
							<div id="scroll2" class="mui-scroll-wrapper">
								<div class="mui-scroll">
									<ul class="mui-table-view">
										<li class="mui-table-view-cell tiny-content" v-for="(Book,index) in Books">
											<div v-if="index == 0">
												<span class="tiny-content-1">预算：{{ Book.budget }}元</span>
												<span class="tiny-content-2" v-if="Book.detail ==''">消费内容：未填写</span>
												<span class="tiny-content-2" v-else="Book.detail !=''">标识：{{Book.detail}}</span>
												<span class="tiny-content-3">时间：{{Book.nowDate}}</span>
											</div>
											<div v-if="index > 0">
												<span class="tiny-content-1">消费{{index}}：{{ Book.consumption }}元</span>
												<span class="tiny-content-2" v-if="Book.detail ==''">标识：未填写</span>
												<span class="tiny-content-2" v-else="Book.detail !=''">标识：{{Book.detail}}</span>
												<span class="tiny-content-3">时间：{{Book.nowDate}}</span>
											</div>
										</li>
										<li class="mui-table-view-cell">
											消费合计：<span>{{total}}元</span>
										</li>
									</ul>
								</div>
							</div>
						</div>
						<div id="item3mobile" class="mui-slider-item mui-control-content">
							<div id="scroll3" class="mui-scroll-wrapper">
								<div class="mui-scroll">
									<ul class="mui-table-view">
										<li class="mui-table-view-cell tiny-content" v-for="month in month_budget">
											<div>时间：{{month[0].nowDate}}</div>
											<div>预算金额：{{month[0].budget}}元</div>
											<div>消费总额：{{month[0].total}}元</div>
										</li>
									</ul>
									<div class="mui-loading" v-if ="month_budget == ''">
										<!--<div class="mui-spinner">
										</div>-->
										<div style="text-align: center;">暂无汇总账单</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div style="width: 100%;height: 40px;position: fixed;bottom: 0;text-align: center;line-height: 40px;">
				<a style="color: black;" href="tel:1-862-551-8603">联系我：18625518603</a>
				<span> &nbsp;QQ:839435033</span>
			</div>
		</main>
		<script type="text/javascript" src="js/date.js"></script>
		<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
		<script>
			mui.init({
				swipeBack: false
			});
			
			if(localStorage.getItem("Book") == null) {
				window.location.href = 'index.html';
			}
			var Book = JSON.parse(localStorage.getItem('Book'));
			var budget_remaining = 0;
			var total = 0;
			for(var i = 1; i < Book.length; i++) {
				total = total + parseFloat(Book[i].consumption)
			}
			total = total.toFixed(2);
			var budget = parseFloat(Book[0].budget);
			var budgetNum = parseFloat(budget - total).toFixed(2);
			var month_budget=[];
			if(localStorage.getItem('month_budget') == null)
			{
				localStorage.setItem("month_budget",JSON.stringify(month_budget));
				
			}else{		
				month_budget = JSON.parse(localStorage.getItem("month_budget"));				
			}
			console.log(month_budget);
			new Vue({
				el: '#app',
				data: {
					Books: Book,
					total: total,//消费总额
					budgetNum: budgetNum,//剩余
					budget: budget ,    //预算金额
					month_budget:month_budget //账单汇总
				},
				methods: {
					addBudget: function() {
						mui(document.getElementById('sure')).button('loading');
						
						//消费金额
						var consumption = document.getElementById("consumption").value;
						if(consumption == '') {
							consumption = 0;
							mui.toast('您输入的金额为空！', {
								duration: 500,
								type: 'div'
							});
						} else {
							consumption = parseFloat(consumption).toFixed(2);
							this.total = (Number(this.total) + Number(consumption)).toFixed(2);
							this.Books[0].total = this.total;
							this.budgetNum = (Number(this.budgetNum) - Number(consumption)).toFixed(2);
							nowDate = now();
							var selectDate = document.getElementById('demo1').innerText;
							if(selectDate == "选择日期时间") {

							} else {
								nowDate = selectDate;
							}
							var aconsumption = {
								consumption: consumption,
								detail: document.getElementById("detail").value,
								budget: budget,
								nowDate: nowDate
							}
							
							this.Books.push(aconsumption);
							//对列表进行时间排序
							for(var i=1;i<this.Books.length;i++)
							{
								for(var j =1;j<this.Books.length-1;j++)
								{
									if(new Date(this.Books[j].nowDate.replace(/-/g,"\/")) > new Date(this.Books[j+1].nowDate.replace(/-/g,"\/")) )
									{
										var temp = this.Books[j+1];
										this.Books[j+1] = this.Books[j];
										this.Books[j] = temp;
									}
								}
							}
							document.getElementById('demo1').innerText="选择日期时间";
							localStorage.setItem('Book', JSON.stringify(this.Books));
						}
						setTimeout(function() {
							document.getElementById("consumption").value = '';
							document.getElementById("detail").value = '';
							mui(document.getElementById('sure')).button('reset');
						}.bind(this), 500);
					},
					newtiny: function() {
						mui(document.getElementById('budget-reset')).button('loading');
						var count = ++this.Books[0].count ;
						localStorage.setItem('count',count);
						console.log(count);
						month_budget.push(Book);
						localStorage.setItem("month_budget",JSON.stringify(month_budget));
						localStorage.removeItem('Book');
						setTimeout(function() {
							window.location.href = 'index.html';
							mui(document.getElementById('sure')).button('reset');
						}.bind(this), 500);
					}
				}
			});
			(function($) {
				$('.mui-scroll-wrapper').scroll({
					indicators: false //是否显示滚动条
				});
				var sliderSegmentedControl = document.getElementById('sliderSegmentedControl');
				$('.mui-input-group').on('change', 'input', function() {
					if(this.checked) {
						sliderSegmentedControl.className = 'mui-slider-indicator mui-segmented-control mui-segmented-control-inverted mui-segmented-control-' + this.value;
						//force repaint
						sliderProgressBar.setAttribute('style', sliderProgressBar.getAttribute('style'));
					}
				});
			})(mui);
		</script>
		<script>
			//日期选择插件
			(function($) {
				$.init();
				var result = $('#demo1')[0];
				var btns = $('.btn');
				btns.each(function(i, btn) {
					btn.addEventListener('tap', function() {
						var _self = this;
						if(_self.picker) {
							_self.picker.show(function(rs) {
								result.innerText = rs.text;

								_self.picker.dispose();
								_self.picker = null;
							});
						} else {
							var optionsJson = this.getAttribute('data-options') || '{}';
							var options = JSON.parse(optionsJson);
							var id = this.getAttribute('id');
							/*
							 * 首次显示时实例化组件
							 * 示例为了简洁，将 options 放在了按钮的 dom 上
							 * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
							 */
							_self.picker = new $.DtPicker(options);
							_self.picker.show(function(rs) {
								/*
								 * rs.value 拼合后的 value
								 * rs.text 拼合后的 text
								 * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
								 * rs.m 月，用法同年
								 * rs.d 日，用法同年
								 * rs.h 时，用法同年
								 * rs.i 分（minutes 的第二个字母），用法同年
								 */
								result.innerText = rs.text;

								/* 
								 * 返回 false 可以阻止选择框的关闭
								 * return false;
								 */
								/*
								 * 释放组件资源，释放后将将不能再操作组件
								 * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
								 * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
								 * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
								 */
								_self.picker.dispose();
								_self.picker = null;
							});
						}

					}, false);
				});
			})(mui);
		</script>
		<script type="text/javascript">
			mui.previewImage();
		</script>
	</body>

</html>